<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" inline v-show="showSearch" label-width="68px">
      <el-form-item label="流水号" prop="serialNo">
        <el-input
          v-model="queryParams.serialNo"
          placeholder="请输入流水号"
          clearable
          size="small"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="完工单号" prop="productFinishNo">
        <el-input
          v-model="queryParams.productFinishNo"
          placeholder="请输入完工单号"
          clearable
          size="small"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="计划编号" prop="productPlanNo">
        <el-input
          v-model="queryParams.productPlanNo"
          placeholder="请输入生产计划编号"
          clearable
          size="small"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="作业名称" prop="productJobName">
        <el-input
          v-model="queryParams.productJobName"
          placeholder="请输入生产作业名称"
          clearable
          size="small"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="产品名称" prop="materialName">
        <el-input
          v-model="queryParams.materialName"
          placeholder="请输入物料产品名称"
          clearable
          size="small"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="检验批次" prop="materialBatchNo">
        <el-input
          v-model="queryParams.materialBatchNo"
          placeholder="请输入检验批次"
          clearable
          size="small"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="生产日期">
        <el-date-picker
          v-model="daterangeProductDate"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="检验项" prop="checkItemName">
        <el-input
          v-model="queryParams.checkItemName"
          placeholder="请输入检验项"
          clearable
          size="small"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="检验结果" prop="checkResult">
        <el-select
          v-model="queryParams.checkResult"
          placeholder="请选择检验结果"
          clearable
          filterable
          size="small"
        >
          <el-option
            v-for="dict in checkResultOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="检验人" prop="checkUser">
        <el-select
          v-model="queryParams.checkUser"
          placeholder="请选择检验人"
          clearable
          filterable
          size="small"
        >
          <el-option
            v-for="dict in checkUserOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="检验时间">
        <el-date-picker
          v-model="daterangeCheckDate"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="productCheckList">
      <el-table-column label="编号" align="center" prop="id" />
      <el-table-column label="流水号" align="center" prop="serialNo" />
      <el-table-column label="计划编号" align="center" prop="productPlanNo" />
      <el-table-column label="完工单号" align="center" prop="productFinishNo" />
      <el-table-column label="作业名称" align="center" prop="productJobName" />
      <el-table-column label="产线名称" align="center" prop="productLineName" />
      <el-table-column label="检验批次" align="center" prop="materialBatchNo" />
      <el-table-column label="产品名称" align="center" prop="materialName" />
      <el-table-column label="生产日期" align="center" prop="productDate" width="180">
        <template #default="{ row }">
          <span>{{ parseTime(row.productDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="检验项" align="center" prop="checkItemName" />
      <el-table-column label="生产数量" align="center" prop="productQuantity" />
      <el-table-column label="抽检数量" align="center" prop="checkQuantity" />
      <el-table-column label="检验结果" align="center" prop="checkResult" :formatter="checkResultFormat" />
      <el-table-column label="检验人" align="center" prop="checkUser" :formatter="checkUserFormat" />
      <el-table-column label="检验时间" align="center" prop="checkDate" width="180">
        <template #default="{ row }">
          <span>{{ parseTime(row.checkDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import { listProductCheck, exportProductCheck } from '@/api/mesCheck/productCheck'

// 响应式状态
const loading = ref(true)
const total = ref(0)
const productCheckList = ref([])
const daterangeProductDate = ref([])
const daterangeCheckDate = ref([])
const showSearch = ref(true)

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  serialNo: null,
  productFinishNo: null,
  productPlanNo: null,
  productJobName: null,
  materialName: null,
  materialBatchNo: null,
  checkItemName: null,
  checkResult: null,
  checkUser: null
})

// 检验结果和检验人选项
const checkResultOptions = ref([])
const checkUserOptions = ref([])

// 获取数据
const getList = async () => {
  try {
    loading.value = true
    const response = await listProductCheck(queryParams)
    productCheckList.value = response.rows
    total.value = response.total
  } finally {
    loading.value = false
  }
}

// 查询处理
const handleQuery = () => {
  queryParams.pageNum = 1
  getList()
}

// 重置查询
const resetQuery = () => {
  daterangeProductDate.value = []
  daterangeCheckDate.value = []
  Object.keys(queryParams).forEach(key => {
    if (key !== 'pageNum' && key !== 'pageSize') {
      queryParams[key] = null
    }
  })
  handleQuery()
}

// 导出处理
const handleExport = async () => {
  try {
    await ElMessageBox.confirm('是否确认导出所有生产检验单数据项?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    const response = await exportProductCheck(queryParams)
    console.log('执行下载:', response.msg)
  } catch (error) {
    console.log('取消导出')
  }
}

// 初始化加载
onMounted(() => {
  getList()
})
</script>
